<template>
  <div class="t-pa-md t-gutter-sm">
    <div class="text-h4">
      <t-badge
        class="q-ml-md"
        :visible="true"
        color="rgb(15,  248, 10)"
        label="12"
        :badgeText="''"
        @click="handleClick"
        :tabIndex="1"
      ></t-badge>
      <t-badge
        class="q-ml-md"
        :visible="true"
        :icon="'camera_enhance'"
        color="rgb(15,  248, 10)"
        label="1"
        :badgeText="'click-按钮'"
        :disable="true"
        :isDot="true"
        @click="handleClick"
        :tabIndex="1"
      ></t-badge>
    </div>

    <t-badge
      class="q-ml-md"
      :visible="false"
      color="red"
      label="11"
      :badgeText="'消息'"
      :max="10"
      @click="handleClick"
      :tabIndex="1"
    ></t-badge>
    <t-badge
      class="q-ml-md"
      color="red"
      label="11"
      :badgeText="'提示'"
      :badgeHiddenWhenZero="false"
      @click="handleClick"
      :tabIndex="1"
    ></t-badge>
    <t-badge
      class="q-ml-md"
      color="red"
      label="0"
      :badgeText="'badgeHiddenWhenZero'"
      :badgeHiddenWhenZero="true"
      @click="handleClick"
      :tabIndex="1"
    ></t-badge>

    <!-- <div style="background: var(--q-primary)">主色</div> -->
  </div>
</template>

<script setup>
  const handleClick = function () {
    console.log('click');
  };
</script>
